<template>
  <el-tabs v-model="activeTab" class="health-tabs">
    <el-tab-pane label="基本信息" name="basic">
      <BasicInfoComponent
        v-if="activeTab === 'basic'"
        :requestSource="2"
        :archive-info="archiveDetail?.archiveBasicInfo"
      />
    </el-tab-pane>

    <el-tab-pane label="健康信息" name="health">
      <HealthInfoComponent
        v-if="activeTab === 'health'"
        :requestSource="2"
        :archive-info="archiveDetail?.archiveHealthInfo"
      />
    </el-tab-pane>

    <el-tab-pane label="生活方式" name="lifestyle">
      <LifestyleComponent
        v-if="activeTab === 'lifestyle'"
        :requestSource="2"
        :archive-info="archiveDetail?.archiveLifestyleInfo"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { healthApi } from "@/api/health";
import type { HealthArchiveDetailData } from "@/api/types";
import BasicInfoComponent from "@/views/healthRecords/components/BasicInfo.vue";
import HealthInfoComponent from "@/views/healthRecords/components/HealthInfo.vue";
import LifestyleComponent from "@/views/healthRecords/components/WayOfLife.vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const activeTab = ref("basic");
const archiveDetail = ref<HealthArchiveDetailData | null>(null);

// 获取健康档案详情
const fetchArchiveDetail = async () => {
  try {
    // 从路由参数获取userId
    const userId = Number(route.params.userId || route.query.userId);

    if (!userId) {
      ElMessage.error("缺少userId参数");
      return;
    }

    const response = await healthApi.getDetail({ userId });

    if (response.code === 0) {
      archiveDetail.value = response.data;
      console.log("健康档案详情:", archiveDetail.value);
    } else {
      ElMessage.error(response.message || "获取健康档案详情失败");
    }
  } catch (error) {
    console.error("获取健康档案详情失败:", error);
    ElMessage.error("获取健康档案详情失败，请稍后重试");
  }
};

onMounted(() => {
  fetchArchiveDetail();
});
</script>

<style scoped></style>
